<template>
	<view class="editAssets">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in range" :key="index">
					<view class="list-item">
						<view>
							<checkbox :disabled="(item.state == 0 || objectIDS.includes(item.objectID)) ? false : true"
								:value="item.objectID" :checked="item.checked" color="#0d6fb8" />
						</view>
						<view class="list-item-left">
							<u-icon name="play-right-fill" color="#0d6fb8"></u-icon>
						</view>
						<view class="list-item-right">

							<view class="name">资产名称：{{ item.assetsName }}({{ item.assetsNo }})</view>
							<view>
								资产价值：{{ item.assetsPrice }}

							</view>
							<view>
								<text>保管单位：{{ item.depository }}</text>
							</view>
							<view>
								<text>添加入：{{ item.creatUserName }}</text>
							</view>
							<view>添加时间：{{ item.updateTime }}</view>
						</view>
						<!-- state: 0 待申报  1 申报中  2 待处置  3处置完成 -->
						<view :class="item.state != 3 ? 'state' : 'stateTwo'">
							{{ item.state == 0 ? '待申报' : item.state == 1 ? '申报中' : item.state == 2 ? '待处置' : '处置完成'
							}}
						</view>
					</view>

				</label>
			</checkbox-group>
		</mescroll-body>


		<view class="foor" @click="save">
			<u-button size="large" type="primary" text="确定"></u-button>
		</view>
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			objectIDS: [],
			upOption: {
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10, // 每页数据的数量
					time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
				},
				noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
				textNoMore: '-- 无更多数据 --', // 没有更多数据的提示文本
			},
			model: {
				pageIndex: 1,
				pageSize: 10,
				input: '',
				maxPrice: '',
				minPrice: '',

			},
			range: [],


		}
	},

	onLoad(option) {
		this.objectIDS = JSON.parse(option.objectID)
	},
	methods: {
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			this.model.pageIndex = page.num
			this.model.pageSize = page.size
			this.$u.api.Pretreatment(this.model).then(res => {
				//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				this.mescroll.endBySize(res.data.length, res.count); //必传参数(当前页的数据个数, 总数据量)
				//设置列表数据
				if (this.model.pageIndex == 1) this.range = []; //如果是第一页需手动制空列表
				this.range = this.range.concat(res.data); //追加新数据
				this.range.forEach(element => {
					this.objectIDS.forEach(v => {
						if (element.objectID == v) {
							element.checked = true
						}
					});
				});

			}).catch(() => {
				//联网失败, 结束加载
				this.mescroll.endErr();
			})
		},
		checkboxChange: function (e) {
			var items = this.range
			this.objectIDS = e.detail.value;
			console.log(this.objectIDS, 'this.objectIDS')
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i]
				if (this.objectIDS.includes(item.objectID)) {
					this.$set(item, 'checked', true)
				} else {
					this.$set(item, 'checked', false)
				}
			}
		},

		save() {
			const arr = this.range.filter((x) => x.checked === true)
			uni.$emit('query', { list: arr })
			uni.navigateBack();
		}


	}
}
</script>

<style lang="scss" scoped>
.editAssets {
	position: relative;
	background: #ffffff;

	.list-item {

		display: flex;
		align-items: center;
		position: relative;
		margin: 20upx auto;
		padding: 16upx;
		background: #ffffff;


		.list-item-left {
			margin-right: 20rpx;
			display: flex;
		}

		.list-item-right {
			view {
				font-size: 24rpx;
				line-height: 36rpx;
				color: #999999;
			}

			.no {
				font-size: 24rpx;
				line-height: 36rpx;
				color: #999999;
			}

			.name {
				font-size: 30rpx;
				color: #333333;
			}
		}

		.state {
			position: absolute;
			top: 10upx;
			right: 10upx;
			color: #e7605d;
			font-size: 26rpx;
		}

		.stateTwo {
			position: absolute;
			top: 0rpx;
			right: 0;
			color: #42ae4b;
			font-size: 26rpx;
		}
	}

	.foor {
		position: fixed;
		bottom: var(--window-bottom);
		right: 0;
		left: 0;
	}

}
</style>
